<template>
    <div>
        <h2>会员修改</h2>
        <table class="table table-bordered">
            <tr>
                <td align="right">会员账号</td>
                <td><input type="text" v-model="state.name" /></td>
            </tr>
            <tr>
                <td align="right">会员密码</td>
                <td><input type="password" v-model="state.pwd" /></td>
            </tr>
            <tr>
                <td align="right">手机号</td>
                <td><input type="text" v-model="state.phone" /></td>
            </tr>
            <tr>
                <td align="right">身份证号码</td>
                <td><input type="text" v-model="state.idCard" /></td>
            </tr>
            <tr>
                <td align="right">图片</td>
                <td>
                    <input type="file" @change="change" />
                    <img v-if="src!=''" :src="src" alt="" width="70" height="70" />
                </td>
            </tr>
            <tr>
                <td align="right"></td>
                <td><input type="button" value="修改" @click="upd" /></td>
            </tr>
        </table>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, toRefs } from 'vue';
import axios from 'axios';
import { useRouter, useRoute } from 'vue-router';
let router = useRouter();
let route = useRoute();
let data = reactive({
    state: {
        name: "",
        phone: "",
        pwd: "",
        photo: "",
        idCard: "",
    },
    src:''
})
let { state,src } = toRefs(data)
onMounted(()=>{
    getlist()
})
const getlist=()=>{
    axios({
        url: "/api/Member/GetMember",
        method: "get",
        params: {
            id: route.query.id
        }
    })
    .then(res=>{
        console.log(res.data)
        state.value = res.data.data
        src.value = res.data.data.photo
    })
    .catch(err=>{
        console.log(err)
    })
}
const upd = () => {
    let obj = {
        id: route.query.id,
        name: state.value.name,
        phone: state.value.phone,
        pwd: state.value.pwd,
        photo: state.value.photo,
        idCard: state.value.idCard,
    }
    axios({
        url: '/api/Member/updateMember',
        method: 'put',
        data: obj
    })
        .then(res => {
            console.log(res)
            if(res.data.data==1){
                alert("修改成功")
                router.push('/list')
            }
            else{
                alert("修改失败")
            }
        })
        .catch(err => {
            console.log(err)
        })
}
const change=(e:any)=>{
let formData=new FormData();
let obj=e.target.files[0];
formData.append("file",obj);
axios({
        url: '/api/Common/GetImge',
        method: 'post',
        data: formData
    })
        .then(res => {
            console.log(res)
            if(res.data.code=1000){
                alert("上传成功")
                src.value="https://localhost:7096"+res.data.filename
                state.value.photo="https://localhost:7096"+res.data.filename
            }
            else{
                alert("上传失败")
            }
        })
        .catch(err => {
            console.log(err)
        })
}
</script>

<style scoped></style>